<!-- 循环渲染children的值--使用递归方法---缺点没有设置为点击行高亮的展示 -->
<template>
  <div style="width: 500px; margin-top: 20px; margin-left: 20px">
    <el-collapse v-model="activeNames" accordion @change="handleChange">
      <recursive-item
        v-for="(item, index) in list"
        :key="index"
        :name="item.indexChildren"
        :item="item"
        :isActive="item.isActive"
        @toggleActive="toggleActive(item)"
      />
    </el-collapse>
  </div>
</template>
  <script>
import RecursiveItem from "./RecursiveItem.vue";
export default {
  components: { RecursiveItem },
  data() {
    return {
      list: [
        {
          id: 1,
          label: "一级 1",
          isActive: false,
          children: [
            {
              id: 4,
              label: "二级 1-1",
              isActive: false,
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                  isActive: false,
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                  isActive: false,
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          isActive: false,
          children: [
            {
              id: 5,
              label: "二级 2-1",
              isActive: false,
              children: [
                {
                  id: 11,
                  label: "三级 1-1-1",
                  isActive: false,
                },
                {
                  id: 12,
                  label: "三级 1-1-2",
                  isActive: false,
                },
              ],
            },
            {
              id: 6,
              label: "二级 2-2",
              isActive: false,
              children: [
                {
                  id: 13,
                  label: "三级 1-1-1",
                  isActive: false,
                },
                {
                  id: 14,
                  label: "三级 1-1-2",
                  isActive: false,
                },
              ],
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          isActive: false,
          children: [
            {
              id: 7,
              label: "二级 3-1",
              isActive: false,
              children: [
                {
                  id: 15,
                  label: "三级 1-1-1",
                  isActive: false,
                },
                {
                  id: 16,
                  label: "三级 1-1-2",
                  isActive: false,
                },
              ],
            },
            {
              id: 8,
              label: "二级 3-2",
              isActive: false,
              children: [
                {
                  id: 17,
                  label: "三级 1-1-1",
                  isActive: false,
                },
                {
                  id: 18,
                  label: "三级 1-1-2",
                  isActive: false,
                },
              ],
            },
          ],
        },
      ],
      activeNames: ["一级 1"],
    };
  },
  mounted() {
    // 初始化时默认不激活任何项
    this.list = this.list.map((item) => ({ ...item, isActive: false }));
  },
  methods: {
    handleChange(names) {
      console.log(names, "activeNames");
    },
    toggleActive(item) {
      this.list = this.list.map((i) => ({
        ...i,
        isActive: i.id === item.id ? !i.isActive : i.isActive,
      }));
    },
  },
};
</script>
<style scoped>
.active-header {
  background-color: #409eff; /* 自定义高亮颜色 */
  border-left: 4px solid #409eff; /* 自定义高亮边框 */
}
>>> .el-collapse-item__content {
  padding-bottom: 0.102vw;
}
.childrenClass {
  width: 100%;
  height: 60px;
  /* border-top: 1px solid #eee; */
  /* border-bottom: none; */
  line-height: 60px;
}
>>> .el-collapse-item__content {
  padding-bottom: 0.102vw;
}
.childrenClass {
  width: 100%;
  height: 60px;
  /* border-bottom: 1px solid #eee; */
  /* border-bottom: none; */
  line-height: 60px;
}
>>> .el-collapse-item__header {
  /* display: block; */
  height: 60px;
}
>>> .el-collapse-item__header.is-active {
  background: #add8fb;
  color: #fff;
  height: 60px;
}
</style>
  